<template>
  <div class="body-class">

  <el-form
    ref="form"
    class="login_container"
    :model="login"
    status-icon
    :rules="rules"
    label-width="70px"
  >
    <!-- h3要放在里面:只能有一个根,且title也是表单的一部分 -->
    <h3 class="login_title">用户登录</h3>
    <!-- prop对应rules里的键 -->
    <el-form-item label="用户名" prop="username">
      <el-input v-model="login.username" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        type="password"
        v-model="login.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item  label="验证码" prop="varify">
      <el-input
          class="input-class-dev"
        type="text"
        v-model="login.varify"
        autocomplete="off"
        maxlength="50"
      ></el-input>
        <div @click="getRandom" v-text="varifyCode" class="input-class-dev1"></div>
    </el-form-item>

    <el-form-item>
      <el-button
        @click="submit"
        type="primary"
        style="margin-left: 30px; margin-top: 10px"
        >提交</el-button
      >
      <el-button
        @click="resetForm"
        type="primary"
        style="margin-left: 30px; margin-top: 10px"
        >重置</el-button
      >
    </el-form-item>
    <el-form-item>
 
	<span @click="clickHandel" class="iconfont icon-qq" ></span>
	<span @click="clickHandel"  class="iconfont icon-weixindenglu"></span>
      <span @click="clickHandel"  class="iconfont icon-guanyuwomen"></span>
    </el-form-item>
  </el-form>
      
</div>
</template>

<script>
import Cookie from "js-cookie";
import '@/css/back-grondu.css'
import { getMenu } from "../api/index";
import { Message } from "element-ui";
import MenuData from "@/data/MenuData";
import Merge from "element-ui/src/utils/merge";
import {mapActions} from "vuex";
import request from "@/utils/request";
export default {
  data() {
    return {
      // 登陆数据
      varifyCode:parseInt(Math.random()*1000)+1000,
      login: {
        username: "",
        password: "",
        varify:''
      },
      // 校验规则
      rules: {
        username: [
          { required: "true", message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: "true", message: "请输入用户名", trigger: "blur" },
        ],
        varify: [
          { required: "true", message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapActions(['setToken']),
    clickHandel()
    {
Message.success('该功能正常维护当中')
    },
    getRandom()
    {
      this.varifyCode =  parseInt(Math.random()*1000)+1000;
    },
    resetForm()
    {
     this.login.username =""
      this.login.password=""
      this.login.varify=""
    },
    submit() {
      // 表单的校验
      this.$refs.form.validate((valid) => {
        if (valid) {
          // alert("开始验证")
          // 传入表单数据
          getMenu(this.login).then((data) => {
            // console.log(data);
          
            // if (data.data.code === 20000) {
            //   // 记录cookie
            //   Cookie.set("token", data.data.data.token);
            //   // 设置菜单
            //   this.$store.commit("setMenu", data.data.data.menu);
            //   // 动态添加路由
            //   this.$store.commit("addMenu", this.$router);
            //   // 跳转到首页
            //   this.$router.push("/home");
            // } else {
            //   // 验证失败的弹窗
            //   this.$message.error(data.data.data.message);
            // }
          }).catch(error=>{
      const {username,password} =  this.login ;

// 用户数据库（实际项目中应该从后端获取）


 if (this.login.varify !=this.varifyCode)
 {
  Message.error('请输入正确的验证码')
   return ;
 }
  // // 1. 检查是否为空
  if (!username || !password) {
    return { valid: false, message: '用户名和密码不能为空' };
  }

request.post('/system/sysuser/verifyUser',{
  username,password
},{
  params:{username,password}
}).then(res => {
  if (res.data.code === 200){
    Message.success('登录成功')
    Cookie.set("token","2222223wewwwwwww");
    this.$store.commit("SET_USERINFO", {username,password});
    localStorage.setItem("userInfo",JSON.stringify({username,password}));
    this.setToken("Bearer"+Math.floor(Math.random()*1000)+1000+''+Math.random());
    // 在这个地方设置一个token进行这个验证这个内容
    this.$router.push("/home");
    this.$store.commit("setMenu", MenuData);
    // 动态添加路由
    this.$store.commit("addMenu", this.$router);
  }else {
    throw  new Error('登入失败用户明密码不正确')
  }
  //  Message.error('登录失败')
}).catch(error=>{
  this.getRandom();
  Message.error(error.message)
})

             
     

          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  width: 350px;
    border: 1px solid #eaeaea;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    left: 37%;
    padding: 35px 35px 15px 35px;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: rgba(255, 250, 250, 0.7);
    box-shadow: 0 0 25px #cac6c6;

  .login_title {
    color: #505458;
    // 左右居中
    text-align: center;
    margin-bottom: 40px;
  }

  .el-input {
    width: 198px;
  }
}
.input-class-dev{
  width: 120px !important;
}
.input-class-dev1  {
 width: 70px ;
  position: absolute;
  cursor: pointer;
  top: 2px;
  height: 40px;
  color: rgba(25, 20, 20, 0.7);
  font-size: 25px;text-align: center;
  font-family: '华文彩云',serif;
  border-color: #409EFF;
  margin-left: 2px;
  //opacity: 0.1;
  display: inline-block;
  background: linear-gradient(0deg,
  #8A2BE2,  /* 紫色 */
  #4B0082,  /* 靛蓝 */
  #0000FF,  /* 蓝色 */
  #008000,  /* 绿色 */
  #FFFF00   /* 黄色 */
  );
}
.icon-qq ,.icon-weixindenglu,.icon-guanyuwomen{
  font-size: 30px;
  margin-left: 20px;
}
</style>